<template>
  <div class="_table">
    <table>
      <thead>
        <slot name="tfoot">
          <tr>
            <th v-for="(item, index) in thead" :key="index">{{item.title}}</th>
          </tr>
        </slot>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td v-for="(row, index) in thead" :key="index">
            <slot :name="row.slot" v-slot="{item, index}">
              {{item[row.key]}}
            </slot>
          </td>
        </tr>
      </tbody>
      <tfoot v-if="isTfoot" >
        <slot name="tfoot"></slot>
      </tfoot>
    </table>

  </div>
</template>

<script>
export default {
  props: {
    // 是否需要table tfoot
    isTfoot: {
      type: Boolean,
      default: false
    },
    // 表头
    thead: {
      type: Array,
      default () {
        return []
      }
    },
    // 数据
    tableData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      msg: 'table'
    }
  }
}
</script>

<style lang="less" scoped>
._table{

}
</style>
